<template>
  <div class="basic_info">
    <div class="info_content_div">
      <div class="div_table">
        <div class="div_screen">
          <div class="screen_left">
            <div class="today_visit">
              <span style="margin-right: 15px">访问人数</span>
              <span class="today_visit_num">{{ visitNum }}</span>
            </div>
          </div>
          <div class="screen_right">
            <div class="right_top">
              <div
                class="month_div"
                :style="{ color: item == monthValue ? '#1A93FA' : '#666' }"
                v-for="item in monthOptions"
                :key="item"
                @click="changeDate(item)"
              >
                {{ item }}
              </div>
              <el-date-picker
                v-model="nowDate"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onClickPicker"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </div>
        </div>
        <div class="table_content">
          <el-table
            ref="tableList"
            highlight-current-row
            :header-cell-style="{
              color: '#666666',
              textAlign: 'left',
              height: '30px',
            }"
            :cell-style="{ textAlign: 'center' }"
            :data="tableData.records"
            height="100%"
            style="width: 100%"
          >
            <template v-for="(item, index) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                :label="item.morenName"
                v-if="item.show"
                :prop="item.props"
              >
                <template slot-scope="scope">
                  <div v-if="item.props == 'userName'" style="display: flex; align-items: center">
                    <img
                      v-if="scope.row['avatarId']"
                      style="width: 28px; height: 28px; border-radius: 14px;"
                      :src="scope.row['avatarId']"
                    />
                    <img v-else style="width: 28px; height: 28px" src="@/assets/shop/shop_header.png" />
                    <div style="margin-left: 14px">{{ scope.row[item.props] }}</div>
                  </div>
                  <span v-else>{{ scope.row[item.props] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="table_pagination">
          <div
            style="
              width: 100px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #999999;
            "
          >
            共{{ tableData.total }}条记录
          </div>
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes"
              :total="tableData.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { getAction, postAction, downPostFile } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'visitorStatistics',
  mixins: [JeecgListMixin],
  computed: {},
  data() {
    return {
      // 月份选择
      monthValue: '月',
      monthOptions: ['日', '周', '月', '年'],
      isShowDate: true, // 是否显示选择时间组件
      queryData: {
        outTime_begin: '',
        outTime_end: '',
      },
      nowDate: [],
      // 表格数据
      tableData: {
        records: [],
        total: 0,
      },
      // 列配置数据
      columnData: [
        {
          morenName: '用户名称',
          show: true,
          props: 'userName',
        },
        {
          morenName: '浏览时间',
          show: true,
          props: 'addTime',
        },
      ],
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      visitNum: 0, // 总访问数
    }
  },
  created() {
    this.getTimeRange(this.$setTimeRange(5))
    this.getTableData()
  },
  methods: {
    // 获取总访问数
    getVisitNum() {
      getAction('/goods/yoshopGoods/getAllUserAccess', {}).then((res) => {
        if (res.success) {
          this.visitNum = res.result || 0
        }
      })
    },
    // 获取访客列表
    getTableData() {
      this.getVisitNum()
      getAction('/goods/yoshopGoods/getUserAccess', {
        beginDate: this.queryData.outTime_begin,
        endDate: this.queryData.outTime_end,
        pageNo: this.currentPage,
        pageSize: this.pagesize,
      }).then((res) => {
        if (res.success) {
          this.tableData.records = res.result.records || []
          this.tableData.total = res.result.total || 0
        }
      })
    },
    // 判断当前选择时间段
    changeDate(val) {
      this.monthValue = val
      switch (val) {
        case '全部':
          this.getTimeRange({
            now: '',
            end: '',
          })
          break
        case '日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
      this.getTableData()
    },
    // 获取时间范围并设置
    getTimeRange(data) {
      this.nowDate = [data.now, data.end]
      this.queryData.outTime_begin = data.now
      this.queryData.outTime_end = data.end
    },
    // 获取当前选中时间
    onClickPicker(val) {
      this.queryData.outTime_begin = val[0]
      this.queryData.outTime_end = val[1]
      if (this.$setTimeRange(1).now == val[0] && this.$setTimeRange(1).end == val[1]) {
        this.monthValue = '日'
      } else if (this.$setTimeRange(3).now == val[0] && this.$setTimeRange(3).end == val[1]) {
        this.monthValue = '周'
      } else if (this.$setTimeRange(5).now == val[0] && this.$setTimeRange(5).end == val[1]) {
        this.monthValue = '月'
      } else if (this.$setTimeRange(7).now == val[0] && this.$setTimeRange(7).end == val[1]) {
        this.monthValue = '年'
      } else {
        this.monthValue = ''
      }
      this.getTableData()
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.pagesize = val
      this.getTableData()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableData()
    },
  },
}
</script>
  
<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 103px);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;

  .el-button {
    width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    margin-right: 6px;
  }

  .el-button--default {
    color: #666;
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    p {
      font-size: 12px;
      color: #666;
      margin: 0 0.1rem 0 0.187512rem;
    }

    ::v-deep .el-checkbox {
      margin-right: 1px;

      .el-checkbox__label {
        font-size: 12px;
        padding-left: 0.1rem;
      }
    }

    ::v-deep .el-select {
      width: 70px;
      height: 40px;
      box-sizing: border-box;
      margin-right: 0.187512rem;

      .el-input {
        .el-input__inner {
          height: 40px;
          border: none;
          font-size: 12px;
        }

        .el-input__suffix {
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
    }

    .selectSty {
      width: 2.625164rem;
    }
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 250px;
      height: 30px;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: 30px;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: 12px;
        color: #666;

        &::placeholder {
          font-size: 12px;
          color: #c1c1c1;
        }
      }
    }

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 60px);
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  display: flex;

  .div_table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s;

    .div_screen {
      width: 100%;
      // height: 100px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;

      .screen_left {
        font-size: 12px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        min-width: 600px;

        .today_visit {
          padding-top: 10px;
          font-family: PingFangSC-Regular, PingFangSC-Regular;
          font-weight: normal;
          font-size: 14px;
          color: #666666;
        }

        .today_visit_num {
          font-family: Segoe UI, Segoe UI;
          font-weight: 400;
          font-size: 20px;
          color: #000000;
        }
      }

      .screen_right {
        .right_top {
          margin-right: 20px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          box-sizing: border-box;
          padding-top: 10px;

          .month_div {
            font-family: PingFangSC-Regular, PingFangSC-Regular;
            font-weight: normal;
            font-size: 12px;
            color: #666666;
            margin-right: 15px;
            cursor: pointer;
          }
        }

        ::v-deep .el-button {
          // width: 60px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          border-radius: 5px;
          border: none;
        }

        ::v-deep .el-select {
          width: 80px;
          margin: 0 10px;

          .el-input {
            .el-input__inner {
              height: 30px;
              border-color: #e3e3e3;
              font-size: 12px;
              padding-left: 5px;
            }

            .el-input__suffix {
              height: 30px;
              display: flex;
              align-items: center;
            }
          }
        }

        ::v-deep .el-date-editor {
          width: 220px;
          height: 30px;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          margin-right: 0.112507rem;
          padding: 3px 6px;

          .el-range__icon {
            position: absolute;
            right: 0;
            line-height: 30px;
          }

          .el-range-separator {
            line-height: 24px;
          }

          .el-range-input {
            font-size: 12px;
          }

          .el-range__close-icon {
            display: none;
          }
        }
      }
    }

    .table_content {
      height: calc(100% - 150px);

      ::v-deep .el-table {
        // border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;
        height: 100%;
        width: 100%;

        .el-table__header {
          width: 100% !important;
        }

        .el-table__body {
          width: 100% !important;
        }

        .el-table__empty-block {
          width: 100% !important;
        }

        th,
        td {
          padding: 0;
          color: #666;
          border: transparent;
          box-sizing: border-box;
          //   border-right: 1px solid #e3e3e3;
          width: 50%;

          .cell {
            min-height: 50px;
            display: flex;
            align-items: center;
            font-size: 12px;
          }

          &:first-child {
            .cell {
              //   justify-content: center;
              padding: 0;
              padding-left: 80px;
            }
          }

          &:nth-child(2) {
            .cell {
              //   justify-content: center;
              padding-left: 80px;
            }
          }

          &:last-child {
            .cell {
              //   justify-content: center;
              padding-left: 80px;
            }
          }
        }

        th {
          .cell {
            background: #ededed;
            // justify-content: center;
          }
        }

        td {
          .cell {
            margin-left: -20px;
          }
        }

        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        .el-icon-edit-outline {
          font-size: 0.25rem;
          color: #1b93f9;
          margin-right: 0.037502rem;
        }

        .el-icon-delete {
          font-size: 0.25rem;
          color: #ff2626;
          margin-left: 0.037502rem;
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .table_pagination {
      display: flex;
      align-items: center;

      .total {
        margin-top: 0.25rem;
        width: 3.750234rem;
        font-size: 12px;
        color: #666666;
      }

      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 10px 0;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}

.custom_item {
  display: flex;
  align-items: center;
  margin: 10px 10px 10px 0;
  width: 180px;
  font-size: 12px;
}

.item_title {
  padding: 0 5px;
  width: auto;
  min-width: 60px;
  line-height: 30px;
  color: #666666;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
}

.custom_select_head {
  flex: 1;
  height: 30px;
  position: relative;

  ::v-deep .el-select {
    .el-input {
      .el-input__inner {
        height: 30px;
        border-color: #e3e3e3;
        font-size: 12px;
        padding-left: 5px;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  ::v-deep .el-input {
    width: 100%;

    .el-input__inner {
      height: 30px;
      border-color: #e3e3e3;
      font-size: 12px;
      padding-left: 5px;
    }

    .el-input__suffix {
      height: 30px;
      display: flex;
      align-items: center;
    }
  }
}

.custom_more {
  position: absolute;
  right: 10px;
  z-index: 10;
  top: 1px;
  background: #fff;
  height: 28px;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}

.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    color: #666666;
  }

  i {
    color: #666666;
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}
</style>